import React from 'react'
import styled from 'styled-components'

function Loading(props) {
	console.log('>>2', props)

	return (
		<LoadingContainer>
			<div className="loading-content">
			</div>
		</LoadingContainer>
	)
}

const LoadingContainer = styled.div`
	width: 60px;
	height: 60px;
	position: relative;
	background: rgba(0,0,0,0.2);
	border-radius: 5px;
	.loading-content {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: #fff 1px solid;
		border-radius: 50%;
		animation: spin 1s infinite;
		&::after {
				content: '';
				position: absolute;
				top: -2px;
				left: 50%;
				transform: translateX(-50%);
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background-color: green;
			}
		@keyframes spin {
			0% {
				transform: translate(-50%, -50%) rotate(0deg);
			}
			100% {
				transform: translate(-50%, -50%) rotate(360deg);
				}
		}
	}
`

export default Loading